<template>
	<view class="">
		<view class="phone">
			<view>
				<u-form-item class="phone-item">
					<u-input placeholder="输入兑换码" type="text" :clearable="false" v-model="redeem_code"
						:custom-style="phoneInput" />
				</u-form-item>
			</view>
		</view>

		<view class="submit">
			<view class="exchange-text" @click="handleClick">
				兑换记录
			</view>
			<uv-btn class="btn2"  :loading="loading" shape="circle" @click="handleSubmitClick" text="确定兑换"
				loading-text="兑换中..."></uv-btn>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//phone
				phoneInput: {
					paddingRight: '120rpx'
				},
				//Form data
				redeem_code:'',
				loading:false,
				
			}
		},
		methods: {
			handleClick(){
				uni.navigateTo({
					url: '/pages/integral/redemption-record'
				});
			},
			handleSubmitClick(){
			
			 if(this.$utils.isAllEmpty(this.redeem_code)){
				//手机号后端要求必填时，才验证手机号的验证码
				this.$utils.toast('兑换码不能为空！');
			}else{
				this.loading = true;
				this.$u.api.exchangeCode({
					redeem_code:this.redeem_code 
				}).then(res => {
					if(res.result_code == 200){
						setTimeout(()=>{
						this.$utils.toast('兑换成功!');	
						},1000)
						uni.navigateBack({				
						  delta: 1,	
						});
					}else{
						this.$utils.toast(res.msg);
					}
					this.loading = false;
				}).catch(err=>{
					this.loading = false;
				})
					
			}
		}
		}
	}
</script>

<style lang="scss" scoped>
	.iconfont {
		color: #0da297;
		font-size: 50rpx;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.verification-code {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.phone {
		position: relative;
		margin: 30rpx 35rpx 0;
		padding-left: 70rpx;
	}

	.submit {
		margin-top: 30rpx;
	    display: flex;	
	}
	.btn1 {
		font-size: 22rpx;
		margin: 0 20rpx;
		width: 20%;
	}
	.btn2 {
		flex: 1;
		margin: 0 20rpx;
	}
	
	.exchange-text {
		margin: 0 20rpx;
		width: 20%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 26rpx;
		text-align: center;
		background-color: #ccc;
		font-weight: 600;
		border-radius: 40rpx;
		border: 2rpx solid #ccc;
		color: #fff;
	}
</style>